<script>
import axios from "axios";

export default {
  name: "RecycleBin",
  props:['recycle_bin'],
  data(){
    return{
      list:[]
    }
  },
  methods:{
    getList() {
     axios.get(`/api/photo/list/del`)
          .then(res =>{
            if(res.data.code === 0 ) {
              this.list=res.data.data
            }else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    showBigPic(src) {
      let big = document.getElementsByClassName('big_pic')[0]
      big.parentNode.style.display = 'flex'
      big.src = src
    },
    exitBigPic(e) {
      let div = e.target
      if (div.tagName === 'IMG')
        div = div.parentNode
      div.style.display = 'none'
    },
    showMask(index){
      document.getElementsByClassName("recycle_mask")[index].style.display="flex"
    },
    leveMask(){
      let div = document.getElementsByClassName("recycle_mask")
      for (let i = 0; i<div.length ;i++) {
        div[i].style.display="none"
      }
    },
    restore(id) {
      axios.get(`/api/photo/restore/${id}`)
          .then(res =>{
            if(res.data.code === 0 ) {
              this.$message.success(res.data.msg)
              this.$emit('close',0)
              this.getList()
            }else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    clear(){
      axios.get(`/api/photo/clear`)
          .then(res =>{
            if(res.data.code === 0 ) {
              this.getList()
            }else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    }
  },
  watch: {
    recycle_bin:{
      immediate:true,
      handler(value) {
        if(value) {
          this.getList()
        }
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="edit_box">
      <div v-show="list.length===0" style="font-size: 30px;font-weight: bold;color: #cdcdcd">空空如也</div>
      <div class="item_box" v-for="(item,index) in list" :key="index">
        <div class="pic_box" @mouseenter="showMask(index)" @mouseleave="leveMask(index)">
          <img :src="item.src" alt="" >
          <div class="recycle_mask">
            <i class="el-icon-zoom-in" @click="showBigPic(item.src)"></i>
            <i class="el-icon-refresh-right" style="margin-left: 20px" @click="restore(item.id)"></i>
          </div>
        </div>
        <div class="pic_text">{{item.time.slice(0,10)}}</div>
      </div>
    </div>
    <div style="height: 50px;width: 100%" v-show="list.length > 0">
      <button class="clear_all" @click="clear">清空回收站</button>
    </div>
  </div>
</template>

<style scoped>
.clear_all{
  border: none;
  background-color: #409EFF;
  border-radius: 10px;
  height: 40px;
  width: 90px;
  float: right;
  cursor: pointer;
  margin-right: 20px;
  color: #ffffff;
}

.edit_box{
  height: 450px;
  overflow: auto;
}

.item_box {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  width: 150px;
  height: 170px;
  float: left;
}
.pic_box {
  height: 150px;
  width: 150px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #222327;
  .recycle_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
    .el-icon-zoom-in, .el-icon-refresh-right{
      color: #ffffff;
      font-size: 20px;
    }
    .el-icon-zoom-in:hover{
      color: #409EFF;
    }
    .el-icon-refresh-right:hover{
      color: #f44336;
    }
  }
}

.pic_text {
  height: 20px;
  width: 100%;
  background-color: #f1f2f5;
  text-align: center;
}
.pic_box img {
  max-height: 100%;
  max-width: 100%;
}
</style>